<template>
  <relation-chart v-if="config.data" :config="config"></relation-chart>
</template>
<script>
import RelationChart from '@/components/relationChart/index'
import { generateRelation } from '../../utils'
export default {
  name: 'RelationChartDemo',
  components: { RelationChart },
  data () {
    return {
      config: {
        set: {
          width: 1000, // 总画布svg的宽,单位为px,默认为容器的宽
          height: 800, // 高，默认为容器的高
          isHighLight: true, // 是否启动 鼠标 hover 到节点上高亮与节点有关的节点，其他无关节点透明的功能
          isScale: true, // 是否启用缩放平移zoom功能
          scaleExtent: [0.5, 1.5], // 缩放的比例尺
          chargeStrength: 0, // 万有引力
          collide: 100, // 碰撞力的大小 （节点之间的间距）
          nodeWidth: 160, // 每个node节点所占的宽度，正方形
          margin: 20, // node节点距离父亲div的margin
          alphaDecay: 0.0228, // 控制力学模拟衰减率
          r: 30, // 头像的半径 [30 - 45]
          relFontSize: 12, // 关系文字字体大小
          linkSrc: 30, // 划线时候的弧度
          linkColor: '#bad4ed', // 链接线默认的颜色
          strokeColor: '#7ecef4', // 头像外围包裹的颜色
          strokeWidth: 3 // 头像外围包裹的宽度
        },
        data: null
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const data = {
        nodes: [
          {
            name: '路人甲-1',
            id: '324',
            avatar: '../../assets/logo.png'
          },
          {
            name: '路人乙-2',
            id: '315',
            avatar: '../../assets/logo.png'
          },
          {
            name: '路人丙-3',
            id: '66',
            avatar: '../../assets/logo.png'
          },
          {
            name: '路人乙-4',
            id: '22',
            avatar: '../../assets/logo.png'
          },
          {
            name: '路人丙-5',
            id: '11',
            avatar: '../../assets/logo.png'
          }
        ],
        links: [
          {
            from: '66',
            to: '324',
            relation: '朋友'
          },
          {
            from: '66',
            to: '315',
            relation: '女朋友'
          },
          {
            from: '11',
            to: '22',
            relation: '朋友'
          }
        ]
      }
      this.config.data = generateRelation(data)
    }
  }
}
</script>
